<template>
	<view class="p30 setting">
		<u-cell :isLink="true" rightIcon="arrow-right" :value="showName" @click="editName">
			<template v-slot:title>
				<text style="font-size: 14px;color:#0C1124">
					用户名称
				</text>
			</template>
		</u-cell>

		<u-cell :border="false" :isLink="true" rightIcon="arrow-right" :value="blurStr(showPhone,4,4)"
			@click="gotoFun('/pagesMy/views/updatePhone')">
			<template v-slot:title>
				<text style="font-size: 14px;color:#0C1124">
					手机绑定
				</text>
			</template>
		</u-cell>
		<u-modal :show="show" title="编辑用户名称" :showCancelButton="true" @cancel="cancel" @confirm="confirm">
			<u--input placeholder="请输入用户名称" v-model="name">
		
			</u--input>
		</u-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	import {
		throttle,
	} from "@/utils/utils.js";
	import {
		getStoreSyncUtil
	} from "@/utils/store.js"
	import {
		editUserAPI
	} from "@/api/api/user.js"
	export default {
		computed: {
			...mapState(["loginUser"])
		},
		data() {
			return {
				showName: '',
				showPhone: '',
				name:'',
				show:false
			}
		},
		onShow() {
			// #ifdef H5
			let loginUser = getStoreSyncUtil("loginUser");
			this.$store.commit('setLoginUser', loginUser);
			// #endif

			this.showName = this.loginUser.nick_name;
			this.showPhone = this.loginUser.phone;
		},
		methods: {
			cancel() {
				this.show = false;
			},
			editName:throttle(function(){
				this.show = true;
				this.name = this.showName;
			}),
			gotoFun: throttle(function(url) {
				this.$navigateTo(url);
			}),
			blurStr(str, start, end, num = 3, order = false) {
				if (this.$validatenull(str)) return "";
				let isBlurKeyWord = 1;
				if (isBlurKeyWord == 1) {
					let count = "";
					for (let i = 0; i < num; i++) {
						count += "*"
					}
					return str.substring(0, start) + count + (order ? str.substring(end) : str.substring(str
						.length - end));
				} else {
					return str;
				}
			},
			confirm() {
				this.show = false;
				if(this.$validatenull(this.name)){
					this.$showToast('请输入用户昵称');
					return;
				}
				editUserAPI({
					id: this.loginUser.user_id,
					name: this.name
				}).then(([err, data]) => {
					if (err) return;
					this.showName = this.name;
					this.loginUser.nick_name = this.showName;
					this.$store.commit("setLoginUser",this.loginUser); 
					this.$showToast('修改用户昵称成功');
				})
			
			}
		}
	}
</script>

<style lang="scss">
	.setting{
		.u-cell__title-text{
			background-color:red;
			color: #0C1124 !important;
		}
		
	}
		
</style>
